position 是指定一个元素在定位方式,也就是元素放置的位置

相對定位與絕對定位

可以用來應用在元素重疊

• static：預設值，代表不會被定位，依照網頁預設排版
• absolute：絕對座標，可放在整個網頁視窗的位置，挪動後原始區塊範圍不保留(跳出不同層的概念)
• relative：相對座標，依照參照的區塊來設定，挪動後原始區塊範圍保留
• 方向：在設定座標種類後，未設定方向時會以左上角為基礎點，座標點數值可以設定為負，進而產生交錯重疊效果
• top、bottom：上下
• left、right：左右
  -- z-index：當 2 個區塊重疊時，原則是後來的會蓋過之前的，若想要把之前的呈現出來，則需要設定 z-index，當值愈大會放在最上面一層
  例如:
  z-index: 9 會呈現在 z-index: 5 的上層

<div class="header">
    <div class="box"></div>
</div>

參考下面程式碼，比較差異

預設的狀況以及 position 設定絕對與相對的差異
顯示位置應該都相同
解除方向的註解，比較預設的狀況以及絕對與相對的差異
預設沒有改變，絕對改至右上，相對改至左下，並且左邊因為移動會被切掉，

• 因為absolute的參考點是「最接近的、已經設定 position (非 static) 的父層」，如果沒有，就會以整個 body 為基準。所以會貼到右上角
• relative元素依然佔住原本的空間，只是「視覺上」往指定方向移動。
  • 注意：
  • top 為正 → 往下移動
  • left 為正 → 往右移動
  • 所以right 為正 → 反而是往左移動
  所以 right: 20px; top: 40px; → 會往左下角移動，看起來被「切掉一部分」。

.header {
    width: 300px;
    height: 200px;
    border: 1px solid red;
    /* position: absolute; */
    /* position: relative; */
    /* right: 20px;
    top: 40px; */
}

增加其子區塊，參考下面程式碼，比較差異

在 .header 的 position: relative;，其 .box 設定 position: absolute; 時，會以 .header 的區塊大小來當作其絕對座標的範圍
可以比對 .box 在絕對與相對時的位置差異

.header {
    width: 300px;
    height: 200px;
    border: 1px solid red;
    position: relative;
    right: 20px;
    top: 40px;
}

.box {
    width: 100px;
    height: 100px;
    background: blue;
    /* position: absolute; */
    position: relative;
    left: 20px;
    bottom: 10px;
}